@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/responsive.less";


@img_base: '../../images';


#rb-ns-ui() {
  .boxes() {
    @bg: #FFFFFF;
    @border-color: #888A85;
    @border-radius: 6px;
    @inner-border-radius: @border-radius - 1px;

    @shadow-radius: 2px;
    @shadow-offset-x: 1px;
    @shadow-offset-y: 1px;
    @shadow-color: rgba(0, 0, 0, 0.15);
    @shadow: @shadow-offset-x @shadow-offset-y @shadow-radius @shadow-color;

    @padding: 1em;
    @main-padding: 1em;

    @title-bg: #rb-ns-ui.colors[@blue-70];
    @title-border-color: #728EAC;
    @title-padding: 0.4em 0.6em;

    .important() {
      @bg: #FDF2A0;
      @bg-image: "@{img_base}/gold_box_top_bg.png";
      @border-color: #B7A93E;
    }

    .tip() {
      @bg: #FDF2A0;
      @bg-image: "@{img_base}/gold_box_top_bg.png";
      @border-color: #B7A93E;
    }

    /**
     * Turn an element into a box display.
     *
     * This adds a standard background, border, shadow, and padding to an
     * element. This is useful for cases where simply adding ``.box`` isn't
     * an option.
     *
     * Args:
     *     @include-padding (bool):
     *         Whether to include standard padding in the box. This can be
     *         disabled when child elements are going to handle the padding.
     */
    .make-box(@include-padding: true) {
      @_boxes-vars: #rb-ns-ui.boxes();

      background-color: @_boxes-vars[@bg];
      border: 1px @_boxes-vars[@border-color] solid;
      border-radius: @_boxes-vars[@border-radius];
      box-shadow: @_boxes-vars[@shadow];
      box-sizing: border-box;

      & when (@include-padding = true) {
        padding: @_boxes-vars[@padding];
      }
    }

    /**
     * Turn an element into a box display at certain screen widths.
     *
     * This uses ``#rb-ns-ui.boxes.make-box()`` at certain screen widths. It's
     * useful for having an element appear as a box on larger screens but not
     * on smaller screens.
     *
     * Args:
     *     @min-width (units):
     *         The minimum viewport width required for the element to appear
     *         as a box.
     */
    .make-box-at-screen-gte(@min-width) {
      #rb-ns-ui.screen.on-width-gte(@min-width, {
        #rb-ns-ui.boxes.make-box();
      });
    }

    /**
     * Remove the box display from an element.
     *
     * This is used to disable box styling for an element, in cases where
     * a particular UI is inheriting a box style it doesn't want.
     */
    .unmake-box() {
      background: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
    }
  }
}


.box, .modalbox {
  #rb-ns-ui.boxes.make-box(@include-padding: false);

  background-position: top left;
  background-repeat: repeat-x;
}

.box {
  @_important-vars: #rb-ns-ui.boxes.important();
  @_tip-vars: #rb-ns-ui.boxes.important();

  &.important {
    background-color: @_important-vars[@bg];
    background-image: url(@_important-vars[@bg-image]);
    border: 1px @_important-vars[@border-color] solid;
    padding: 0 10px;

    .box-inner {
      background: url("@{img_base}/important.png") no-repeat top left;
      padding: 0 0 0 50px;
    }
  }

  &.tip {
    background-color: @_tip-vars[@bg];
    background-image: url(@_tip-vars[@bg-image]);
    border: 1px @_tip-vars[@border-color] solid;
    padding: 0 10px;

    .box-inner {
      background: transparent;
    }

    h1 {
      padding-left: 0;
    }
  }

  &.trophies {
    background-color: @trophy-banner-bg-color;
    background-image: url('@{img_base}/gold_box_top_bg.png');
    border: 1px #b7a93e solid;
    padding: 0 5px;

    h1 {
      margin: 0;
      padding: 0 0 0 0.5em;
    }

    img {
      margin: 0;
      padding: 0;
      position: absolute;
      bottom: 0;
    }

    .box-inner {
      background: transparent;
      position: relative;
    }

    .trophy-row {
      position: relative;
      margin: 30px 0 10px 0;

      &:first-child {
        margin-top: 10px;
      }
    }
  }
}

.box-head,
.modalbox-title {
  @_boxes-vars: #rb-ns-ui.boxes();

  background: @_boxes-vars[@title-bg];
  border-bottom: 1px @_boxes-vars[@title-border-color] solid;
  margin: 0;
  padding: @_boxes-vars[@title-padding];
  border-radius: @_boxes-vars[@border-radius] @_boxes-vars[@border-radius]
                 0 0;
}

.box-title,
.modalbox-title {
  font-size: 120%;
}

.box-title {
  margin: 0;
  padding: 0;
}

.box-main {
  padding: #rb-ns-ui.boxes[@main-padding];
}

.box-container {
  margin-bottom: 10px;
  width: 100%;
}

.box-inner,
.modalbox-inner {
  background-image: url('@{img_base}/box_bottom_bg.png');
  background-position: bottom left;
  background-repeat: repeat-x;
  border-radius: #rb-ns-ui.boxes[@border-radius];

  padding-bottom: 1px\9; /* IE wants this. The \9 targets IE 7,8,9. */
}

.box-inner form {
  margin: 0;
}

.modalbox, .modalbox-bg {
  z-index: @z-index-dialog;
}
